<template>
  <div>
    <a-row
      type="flex"
      justify="center"
      :style="{'align-content': 'center', 'background-color': '#28C5D7','height':winHeight}">
      <a-col :span="4">
      </a-col>
      <a-col :span="10">
        <!--        <div style="margin-top: 60px; margin-bottom: 60px;">-->
        <!--          <img src="~@/assets/login.png" style="height: 380px;" alt="logo">-->
        <!--        </div>-->
      </a-col>
      <a-col :span="1">
      </a-col>
      <a-col :span="6">
        <!--        <video autoplay muted loop style="position:absolute;height: 100%;width: 100%;-webkit-filter: grayscale(20%);">-->
        <!--          <source src="~@/assets/firework.mp4" type="video/mp4"/>-->
        <!--        </video>-->
        <div style="margin-top: 60px; margin-bottom: 60px; border-radius: 5px;background-color: white; padding: 20px 30px 10px 30px;">
          <div style="font-weight: bold; font-size: large; color: #303133;">
            用户注册
          </div>
          <div style="margin: 20px 0px 10px 0px;">
            <a-form
              id="formLogin"
              class="user-layout-login"
              ref="formLogin"
              :form="form"
              @submit="handleSubmit"
            >
              <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 10px;" :message="this.errorMsg" />
              <a-form-item>
                <a-input
                  size="large"
                  type="text"
                  placeholder="注册账号"
                  v-decorator="[
                    'loginName',
                    {rules: [{ required: true, message: '请输入注册账号', trigger: 'blur' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
              <a-form-item style="margin-top: 30px;">
                <a-input
                  size="large"
                  type="password"
                  autocomplete="false"
                  placeholder="登录密码"
                  v-decorator="[
                    'loginPwd',
                    {rules: [{ required: true, message: '请输入登录密码' },
                             { validator: validateLoginPwd, trigger: 'blur' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
              <a-form-item style="margin-top: 30px;">
                <a-input
                  size="large"
                  type="password"
                  autocomplete="false"
                  placeholder="确认密码"
                  v-decorator="[
                    'secondPwd',
                    {rules: [{ required: true, message: '请确认密码' },
                             { validator: validateSecondPwd, trigger: 'blur' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
              <a-form-item style="margin: 40px 0px 30px 0px; background-color: #28C5D7;">
                <a-button
                  size="large"
                  type="primary"
                  htmlType="submit"
                  class="login-button"
                  :loading="state.loginBtn"
                  :disabled="state.loginBtn"
                >注册</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </a-col>
      <a-col :span="3">
      </a-col>
    </a-row>
    <a-row>
    </a-row>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import { register } from '@/api/system/account'
  import md5 from 'md5'

  export default {
    // ####################
    data () {
      return {
        loginBtn: false,
        isLoginError: false,
        errorMsg: '用户名或密码错误',
        randomUuid: '',
        imageCode: '',
        form: this.$form.createForm(this),
        state: {},
        winHeight: ''
      }
    },
    created () {
      // const _this = this
      this.winHeight = window.innerHeight - 180 + 'px'
      window.document.getElementsByTagName('body')[0].style.overflow = 'hidden'
      // kaptcha()
      //   .then(res => {
      //     if (res.data.message !== 'error') {
      //       _this.randomUuid = res.data.result.uuid
      //       _this.imageCode = res.data.result.image
      //     } else {
      //       this.$message.error('操作失败！')
      //     }
      //   })
    },
    methods: {
      ...mapActions(['Login', 'Logout']),
      // handler
      // 前端验证登录密码的合法性
      validateLoginPwd (rule, value, callback) {
        const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/
        if (regex.test(value)) {
          return callback()
        } else {
          return callback(new Error('大/小写字母，数字，特殊符号四选三，长度至少6位'))
        }
      },
      validateSecondPwd (rule, value, callback) {
        if (this.form.getFieldValue('loginPwd') === value) {
          return callback()
        } else {
          return callback(new Error('密码输入不一致'))
        }
      },
      handleTabClick (key) {
      },
      // getKaptcha () {
      //   const _this = this
      //   kaptcha()
      //     .then(res => {
      //       if (res.data.message !== 'error') {
      //         _this.randomUuid = res.data.result.uuid
      //         _this.imageCode = res.data.result.image
      //       } else {
      //         this.$message.error('操作失败！')
      //       }
      //     })
      // },
      handleSubmit (e) {
        e.preventDefault()
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            const registerParams = {}
            registerParams.loginName = values.loginName
            registerParams.loginPwd = md5(values.loginPwd)
            register(registerParams)
              .then(res => this.registerResponse(res))
              .catch(err => this.requestFailed(err))
          } else {
            this.confirmLoading = false
          }
        })
      },
      async registerResponse (res) {
        if (res.status === 200) {
          if (res.data.result !== -1) {
            await this.$notification.success({
              message: '注册成功',
              description: `欢迎加入本系统`
            })
            await this.$notification.info({
              message: '提示',
              description: `预计3秒后关闭页面`
            })
            setInterval(this.sun, 20)
            setTimeout(window.close, 3000)
          } else {
            this.$notification.error({
              message: '注册失败',
              description: `用户名已被占用`
            })
          }
        } else {
          this.isLoginError = true
          this.errorMsg = res.data.message
        }
      },
      requestFailed (err) {
        this.isLoginError = true
        this.$notification['error']({
          message: '错误',
          description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
          duration: 4
        })
      },
      sun () {
        const root = window.document.getElementById('app')
        const divSun = window.document.createElement('div')
        const divS = window.document.createElement('div')
        const divUn = window.document.createElement('div')
        divSun.className = 'sun'
        divS.className = 's'
        divUn.className = 'un'
        divSun.setAttribute('data-v-30b8895d', '')
        divS.setAttribute('data-v-30b8895d', '')
        divUn.setAttribute('data-v-30b8895d', '')
        divSun.style.marginTop = Math.random() * window.innerHeight - window.innerHeight - 100 + 'px'
        divSun.style.marginLeft = Math.random() * window.innerWidth - 125 + 'px'
        root.appendChild(divSun)
        divSun.appendChild(divS)
        divSun.appendChild(divUn)
      }
    }
  }
</script>
<style lang="less" scoped>
  .sun {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 100;
    .s{
      width: 120px;
      height: 104px;
      top:8px;
      position: absolute;
      left:34px;
      background-image:url(../../assets/s.png);
    }
    .un{
      width: 250px;
      height: 200px;
      bottom: -20px;
      top: -40px;
      left:-30px;
      position: absolute;
      animation:change_t 0.15s infinite;
      background-repeat: no-repeat;
      background-position: 0px,0px;
    }
  }
  @keyframes change_t{
    0%{background-image: url(../../assets/s1.png);}
    25%{background-image: url(../../assets/s2.png);}
    50%{background-image: url(../../assets/s3.png);}
    75%{background-image: url(../../assets/s4.png);}
    100% {background-image: url(../../assets/s5.png);}}
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      background-color: #28C5D7;
      border: 2px solid #28C5D7;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
